<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'
import { defaultPagingParams } from '../index'
import { PAGING } from '@/constant'
// ------------------use------------------
// #region
const emits = defineEmits<{
  search: []
  reset: []
  plus: []
}>()
const query = defineModel({
  default: () => defaultPagingParams,
})
// #endregion
// ------------------静态变量------------------
// #region
const handleShortcuts = PAGING.RANGE_SHORTCUTS_DAY.map(
  (item) => {
    const value = () => {
      const [start, end] = item.value()
      const current = new Date()
      const upperLimit = new Date(
        current.getFullYear() + 1,
        0,
        1,
        0,
        0,
        0,
      )
      if (end!.getTime() > upperLimit.getTime()) {
        return [start, upperLimit]
      }
      else {
        return [start, end]
      }
    }
    return {
      ...item,
      value,
    }
  },
)
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region
const computedTime = computed({
  get() {
    return [query.value.startTime, query.value.endTime]
  },
  set([a, b]: any) {
    query.value.startTime = a
    query.value.endTime = b
  },
})
// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
/** 重置 */
async function reset() {
  query.value = { ...defaultPagingParams }
  await nextTick()
  emits('reset')
}
async function search() {
  Object.assign(query.value, PAGING.PARAMS)
  await nextTick()
  emits('search')
}
function handleDisabledDate(date: Date) {
  const current = new Date()
  const year = current.getFullYear()
  const targetYear = date.getFullYear()
  return year !== targetYear
  // return month !== targetMonth;
}
// #endregion
</script>

<template>
  <el-form
    inline
    label-width="50px"
    label-position="left"
    class="flex-incompressible width-fill"
  >
    <el-form-item label-width="50px" label="区间">
      <el-date-picker
        v-model="computedTime"
        type="daterange"
        unlink-panels
        value-format="x"
        start-placeholder="开始时间"
        end-placeholder="解释时间"
        :shortcuts="handleShortcuts"
      />
    </el-form-item>
    <el-form-item>
      <SearchButton @click="search" />
      <el-button plain :icon="Delete" @click="reset">
        清空
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
